<template>
  <div style="height: 100%;">
    <div class="head">
      <a @click="prev" id="btn_back_chanping" class="return"></a>贷款申请页
    </div>
    <div class="weui-tab weui-fixed weui-tab_apply contents" style="margin-top: 45px;">
      <div class="weui-tab__bd weui_paddingdown">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
          <form id="applyForm">
            <div class="weui-cells weui-cells_form">
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">申请金额</label>
                </div>
                <div class="weui-cell__bd">
                  <input
                    name="applyMoney"
                    id="applyMoney"
                    class="weui-input"
                    type="number"
                    pattern="[0-9]*"
                    placeholder="请输入金额"
                    v-model="applyMoney"
                  >
                </div>
                <div class="weui-cell__ft">
                  <div class="weui-vcode_unit">万元</div>
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__hd">
                  <label class="weui-label">期限</label></div>
                <div class="weui-cell__bd">
                  <input name="applyMonth" id="applyMonth" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入期限">
                </div>
                <div class="weui-cell__ft">
                  <div class="weui-vcode_unit">月</div>
                </div>
              </div>
              <div class="weui-cell weui_lineheight">
                <div class="weui-cell__hd">
                  <label class="weui-label">职业类型</label>
                </div>
                <div class="weui-cell__bd">
                  <select class="weui-select" name="marriage" id="marriage">
                    <option value="">请选择职业类型</option>
                    <option value="1">经营生意</option>
                    <option value="2">公务员/事业单位</option>
                    <option value="3">大中型企业</option>
                    <option value="4">上族班</option>
                  </select>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div>
    <div style="height: 100px;"></div>
  </div>
  <div class="weui-flex weui-fixed-btm p10 weui-tab__bd-item" id="applyBtnDiv">
      <a @click="applyBtn" class="weui-btn weui-btn_shenqing">申请提交</a>
  </div>
  </div>
</template>

<script>
import $ from 'jquery'
window.jQuery = $
window.$ = $
export default {
  data () {
    return {
      applyMoney: ''
    }
  },
  watch: {
    applyMoney: function (val) {
      var number = val.toString().indexOf('.')
      if (number > -1) {
        var msg = val.toString().split('.')
        if (msg[1].length > 2) {
          this.applyMoney = parseFloat(msg[0] + '.' + msg[1].substring(0, 2))
        }
      }
    }
  },
  methods: {
    prev: function () {
      this.$router.push({ path: '/' })
    },
    applyBtn: function () {
      var data = $('#applyForm').serialize()
      if (this.applyMoney === '') {
        $.toast('请输入申请金额', 'text')
        $('#applyMoney').focus()
        return
      }
      if ($('#applyMonth').val() === '') {
        $.toast('请输入期限', 'text')
        $('#applyMonth').focus()
        return
      }
      if ($('#marriage').val() === '') {
        $.toast('请选择职业类型', 'text')
        $('#marriage').focus()
        return
      }
      console.log('申请信息：' + data)
      this.$router.push({ path: '/LoanInfo' })
    }
  },
  mounted () {
    document.body.style.backgroundColor = '#FFFFFF'
  }
}
</script>

<style lang="css" scoped>
@import '../../../assets/styles/loanapply.css'
</style>
